<template>
  <div style="margin-bottom: 16vw;">
    <div class="goods"  v-for="v in allGoodsList">
      <img :src=v.image alt="">
      <p class="scrip">{{v.goods_name}}</p>
      <p class="price">￥{{v.sell_price}}<span class="oldPrice">￥{{v.market_price}}</span>
        <span class="liked">{{v.popularity}}</span><img src="../../assets/img/fire.png" alt="">
      </p>
    </div>
    <div class="clear"></div>
    <div class="width:100%;height:11vw;"></div>
  </div>
</template>

<script>
  export default {
    name: "popularity",
    props:["allGoodsList"],
  }
</script>

<style scoped lang="scss">
  .text{
    width:80%;
    height:6vw;
    margin: 0px auto;
    img{
      float:left;
      margin-top: 2.7vw;
      width:37%;
    }
    p{
      float: left;
      font-size: 16px;
      color: #ff5230;
      margin-left:2vw;
      margin-right:2vw;
    };
  }
  .goods{
    width:44vw;
    height:auto;
    margin:3vw 2vw 3vw 3vw;
    background: #fff;
    float: left;
    .scrip{
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      height: 11vw;
      overflow: hidden;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .price{
      font-size:13px;
      color: #353535;
      margin-top: 1vw;
      .liked{
        font-size: 10px;
        color: #ff4c50;
        float: right;
        margin-right:3vw;
      }
      img{
        width:2.67vw;
        height:3.2vw;
        display: inline-block;
        float: right;
      }
      .oldPrice{
        font-size: 10px;
        color: #888888;
        text-decoration: line-through;
      }
    }
    .hot{
      width:8vw;
      height:4vw;
      background:#ff4c50;
      color: #fff;
      line-height:4vw;
      text-align: center;
      justify-content: center;
      margin-top: 2vw;
      margin-bottom: 2vw;
    }
    .scrop{
      color: #353535;
      font-size: 13px;
      text-align: left;
      margin-bottom: 2vw;
    }
    img{
      width:44vw;
      height:44vw;
      margin-bottom: 2vw;
    }
  }
</style>
